/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component} from 'react';
import {Form, Input, Radio, Select,Checkbox,
   Icon,
   TreeSelect,
  Upload, } from 'antd';
import {connect} from 'dva';
import moment from 'moment'
import request from '@/utils/request';
const FormItem = Form.Item;
const { TextArea } = Input;
const RadioGroup = Radio.Group;
const { TreeNode } = TreeSelect;

const Option = Select.Option;
class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      all_roles:[],
      all_receiver:[],
      indeterminate: false,
      checkAll: false,
      checkedList:[],
      };
  }

  componentDidMount() {
    const that=this;
    request(`/all_departments`, {
      method: 'GET',
    }).then((response)=> {
      console.log('all_structures', response)
      if(response.status===200){
        that.setState({
          all_roles:response.data.data
        })
      }
    })
  }
  changeRoles=(value)=>{
    console.log('value',value)
    const that=this;
    request(`/all_staffs`, {
      method: 'GET',
      params:{
        department_ids:value
      }
    }).then((response)=> {
      console.log('all_receiver', response)
      if(response.status===200){
        let all_receiver=[];
        let checkedList=[];
        for(let i=0;i<response.data.data.length;i++){
          all_receiver.push({ label: response.data.data[i].name, value: response.data.data[i].id},)
          if(that.state.checkedList.indexOf(response.data.data[i].id)>=0){
            checkedList.push(response.data.data[i].id)
          }

        }
        that.setState({
          all_receiver:all_receiver,
          checkedList:checkedList
        },function() {
          that.setState({
            indeterminate: !!checkedList.length && checkedList.length < that.state.all_receiver.length,
            checkAll: checkedList.length === that.state.all_receiver.length,
          })
        })
      }
    })
  }
  renderTreeNodes=(data)=>{
    return data.map((item) => {
      if (item.children) {
        return (
          <TreeNode  value={`${item.id}`} title={item.name} key={item.id} >
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return  <TreeNode value={item.id}  title={item.name} key={item.id} />
    });
  }
  onChange = checkedList => {
    console.log('checkedList',checkedList)
    this.setState({
      checkedList,
      indeterminate: !!checkedList.length && checkedList.length < this.state.all_receiver.length,
      checkAll: checkedList.length === this.state.all_receiver.length,
    });
  };

  onCheckAllChange = e => {
    let checkedList=[];
    console.log('this.state.all_receiver',this.state.all_receiver)
    for(let i=0;i<this.state.all_receiver.length;i++){
      checkedList.push(this.state.all_receiver[i].value)
    }
    this.setState({
      checkedList: e.target.checked ? checkedList : [],
      indeterminate: false,
      checkAll: e.target.checked,
    });
  };
  render() {
    const formItemLayoutWithLabel = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 4},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 18},
      }
    };

    const {getFieldDecorator} = this.props.form;
    return (
      <div>

        <Form onSubmit={this.handleSubmit}>
        <FormItem
          {...formItemLayoutWithLabel}
          label={(
            <span>
            部门
          </span>
          )}>
          {getFieldDecorator('role_id', {
            rules: [{required: true, message:'请选择公司结构'}],
          })(
            <TreeSelect onChange={this.changeRoles} treeDefaultExpandAll placeholder={'请先选择部门再选择员工'} multiple>
              {this.renderTreeNodes(this.state.all_roles)}
            </TreeSelect>
          )}
        </FormItem>
        <FormItem
          {...formItemLayoutWithLabel}
          label={(
            <span>
            员工
          </span>
          )}>
          {getFieldDecorator('user', {
            rules: [{required: true, message:'接收员工'}],
          })(
            <div>
              <div style={{ borderBottom: '1px solid #E9E9E9' }}>
                {
                  this.state.all_receiver.length>0&&
                  <Checkbox
                    indeterminate={this.state.indeterminate}
                    onChange={this.onCheckAllChange}
                    checked={this.state.checkAll}
                  >
                    选择全部
                  </Checkbox>
                }
              </div>
              <Checkbox.Group style={{ width: '100%' }}  options={this.state.all_receiver}   value={this.state.checkedList} onChange={this.onChange}>

              </Checkbox.Group>
            </div>
          )}

        </FormItem>
        </Form>
      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);
